import "./App.css";
import React from "react";
import { Card } from "antd";
import { Row,Button, Col } from "antd";
import "antd/dist/antd.css";
import { Image } from "antd";
import { EyeFilled, HeartFilled } from "@ant-design/icons";
import { requestIndex, postView, postLike } from "./http/bingApi";

const { Meta } = Card;

const Header = () => {
  return (
    <div className="header">
      <div className="header__title">必应美图</div>
      <div className="header__options">
        <Button className="header__button">选项1</Button>
        <Button className="header__button">选项2</Button>
        {/* 更多按钮可以根据需要添加 */}
      </div>
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      pageIndex: 1,
      pageSize: 16,
      hasMore: true, // 新增状态，用于判断是否还有更多数据
    };
    this.loadMore = this.loadMore.bind(this);
  }

  componentDidMount() {
    this.fetchData(this.state.pageIndex, this.state.pageSize);
    console.log(this.state);
    window.addEventListener("scroll", this.loadMore); // 添加滚动监听
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.loadMore); // 移除滚动监听
  }

  fetchData(pageIndex, pageSize) {
    requestIndex(pageIndex, pageSize).then((res) => {
      if (res.imageList.length < pageSize) {
        this.setState({ hasMore: false }); // 如果返回的数据小于一页，则标记为没有更多数据
      }
      this.setState((prevState) => ({
        data: [...prevState.data, ...res.imageList],
        pageIndex: pageIndex + 1,
      }));
    });
  }

  loadMore() {
    const { data, pageIndex, pageSize, hasMore } = this.state;
    // 检查是否滚动到底部并且还有更多数据
    if (!hasMore) return;
    const windowHeight =
      "innerHeight" in window
        ? window.innerHeight
        : document.documentElement.offsetHeight;
    const body = document.body;
    const html = document.documentElement;
    const docHeight = Math.max(
      body.scrollHeight,
      body.offsetHeight,
      html.clientHeight,
      html.scrollHeight,
      html.offsetHeight
    );
    const windowBottom = windowHeight + window.pageYOffset;
    if (windowBottom >= docHeight) {
      this.fetchData(pageIndex + 1, pageSize);
    }
  }

  addImageLikeCount = (date) => {
    postLike(date).then((res) => {
      const newList = this.state.data.map((item) => {
        if (item.date === date) {
          item.imageLike = res;
        }
        return item;
      });
      this.setState({
        data: [...this.state.data, ...newList],
      });
    });
  };
  addImageViewCount = (date) => {
    postView(date).then((res) => {
      const newList = this.state.data.map((item) => {
        if (item.date === date) {
          item.imageView = res;
        }
        return item;
      });
      this.setState({
        data: [...this.state.data, ...newList],
      });
    });
  };

  formatDate = (dateString) => {
    // 将字符串转换为Date对象
    const date = new Date(
      dateString.slice(0, 4),
      dateString.slice(4, 6) - 1,
      dateString.slice(6, 8)
    );
    // 使用Intl.DateTimeFormat进行格式化
    const options = { month: "long", day: "numeric", year: "numeric" };
    const formattedDate = new Intl.DateTimeFormat("en-US", options).format(
      date
    );
    return formattedDate;
  };

  renderDesc = (item) => {
    return (
      <div style={{ textAlign: "right", width: "100%" }}>
        <div className="date">{this.formatDate(item.date)}</div>
        <div className="icon">
          <EyeFilled /> {item.imageView}
        </div>
        <div className="icon like">
          <HeartFilled onClick={() => this.addImageLikeCount(item.date)} />{" "}
          {item.imageLike}
        </div>
      </div>
    );
  };
  render() {
    const { data } = this.state;
    return (
      <div className="content" style={{ overflowY: "auto" }}>
         <Header />
        <Row justify="space-around" style={{ display: "flex" }} gutter={24}>
          <Image.PreviewGroup>
            {data?.map((item) => {
              return (
                <Col
                  style={{ display: "flex" }}
                  xs={24}
                  sm={12}
                  md={8}
                  lg={6}
                  xl={6}
                >
                  <Card hoverable={true}>
                    <Image
                      onClick={() => this.addImageViewCount(item.date)}
                      preview={{
                        src: `${item.hdLink}`,
                      }}
                      src={`${item.sdLink}`}
                    />
                    <Meta
                      title={
                        <div style={{ "white-space": "break-spaces" }}>
                          {item.copyright}
                        </div>
                      }
                      description={this.renderDesc(item)}
                    />
                  </Card>
                </Col>
              );
            })}
          </Image.PreviewGroup>
        </Row>
      </div>
    );
  }
}
export default App;
